<template>
  <FetchList
    ref="fetchList"
    @change="handleListChange"
    :api="api"
    :params="{
      type,
      keyword,
    }"
    :activeNav="activeNav"
    :isStopLoad="activeNav !== type"
    :reachBottomTime="reachBottomTime"
    :pullDownRefreshTime="pullDownRefreshTime"
    height="calc(100vh - 60px - 52px)"
  >
    <List :list="list" />
  </FetchList>
</template>

<script>
import FetchList from '@/components/FetchList'
import List from './List'
import api from '@/api'
export default {
  components: {
    FetchList,
    List,
  },
  props: {
    type: {
      type: String,
      required: true,
    },
    activeNav: {
      type: String,
      required: true,
    },
    reachBottomTime: {
      type: String,
      required: true,
    },
    pullDownRefreshTime: {
      type: String,
      required: true,
    },
    keyword: {
      type: String,
      required: true,
    },
  },
  data () {
    return {
      api: api.getVoteList,
      list: [],
    }
  },
  watch: {
    keyword () {
      setTimeout(() => {
        console.log('keyword change')
        this.$refs.fetchList.$focusRefresh()
      }, 20)
    },
  },
  methods: {
    handleListChange (list) {
      console.log('list', list)
      this.list = list
    },
  },
}
</script>
